<template>
<div class="box-plot" v-show="data" :id="id" :style="id === 'boxPlot' ? 'height:400px;width:100%;' : 'height:60px;width:129px;'"></div>
</template>

<script>
export default {
    name: 'BoxPlot',
    props: {
        id: {
            type: String
        },
        data: {
            type: Object
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        init () {
            if (this.data) {
                this.$nextTick(() => {
                    let boxPlot = this.$echarts.init(document.getElementById(this.id))
                    const {
                        outliers,
                        Q1,
                        Q2,
                        Q3,
                        IQR,
                        upperRange,
                        lowerRange
                    } = this.data
                    let option = {
                        tooltip: {
                            show: this.id === 'boxPlot',
                            trigger: 'item'
                        },
                        xAxis: {
                            show: this.id === 'boxPlot',
                            type: 'category',
                            data: [''],
                            boundaryGap: true,
                            nameGap: 30,
                            axisLine: {
                                lineStyle: {
                                    color: '#ebeef5'
                                }
                            }
                        },
                        grid: {
                            left: this.id === 'boxPlot' ? '20%' : 0,
                            right: this.id === 'boxPlot' ? '20%' : 0
                        },
                        yAxis: {
                            show: this.id === 'boxPlot',
                            type: 'value',
                            splitArea: {
                                show: false
                            },
                            axisTick: { show: false },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#ebeef5'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#606266'
                                }
                            }
                        },
                        series: [
                            {
                                name: 'boxplot',
                                type: 'boxplot',
                                data: [[lowerRange, Q1, Q2, Q3, upperRange]],
                                tooltip: {
                                    show: this.id === 'boxPlot',
                                    confine: true,
                                    formatter: (param) => {
                                        return [
                                            `25%分位数: ${Q1.toFixed(4)}`,
                                            `中位数: ${Q2.toFixed(4)}`,
                                            `75%分位数: ${Q3.toFixed(4)}`,
                                            `四分位间距: ${IQR.toFixed(4)}`,
                                            `上边界: ${upperRange.toFixed(4)}`,
                                            `下边界: ${lowerRange.toFixed(4)}`
                                        ].join('<br/>')
                                    }
                                },
                                itemStyle: {
                                    borderColor: '#3F9EFF'
                                }
                            },
                            {
                                name: '异常值',
                                type: 'scatter',
                                symbolSize: 5,
                                data: outliers.map(v => v.toFixed(4))
                            }
                        ]
                    }
                    boxPlot.setOption(option, true)
                })
            }
        }
    }
}
</script>
<style lang="less">
    .box-plot {
        display: flex;
        justify-content: center;
    }
</style>
